<template>
  <modal :modal-id="modalType" class="modal-knowledge-parametric" @close="closeEvenHandler">
    <template #title>{{ $t('message.ElementLibrary.paramSelect') }}</template>
    <template #body>
      <div v-for="item in params.listParameters">
        <div class="d-flex align-items-center">
          <label class="el-form-item__label">{{ item.name }}:</label>
          <el-input v-model="item.expression"
                    :disabled="false"
                    type = "number"/>
        </div>
      </div>
    </template>
    <template #footer>
      <div>
        <!--        <el-button type="primary" :disabled="loading" @click="showRefPicture = !showRefPicture">{{-->
        <!--            refPictureBtnText-->
        <!--          }}-->
        <!--        </el-button>-->
        <el-button type="primary" @click="insert">{{ $t('message.ElementLibrary.insert') }}
        </el-button>
      </div>
    </template>

  </modal>
</template>

<script>
import {elementLibraryCmd} from "../../../Command/ElementLibrary/ElementLibraryCommand";
import {modalController} from "../../BaseComponents/BaseModal/JS/ModalController";
import elementLibraryManager from "./js/ElementLibraryManager";
export default {
  name: "ModalSelectParametricOption",
  props: ['modalType', "modalParams"],
  data: function() {
    return {
      s: "",
      params: {
        listParameters:null,                //参数数据
      },
    };
  },
  created() {

  },

  mounted() {
    this.init();
  },

  methods: {
    async init() {
      if (!this.modalParams.parametricTableId) this.close();
      let paramsGetParameters = {
        cmdName: 'getElementModelParametricTable',
        id: this.modalParams.parametricTableId,
      }
      elementLibraryCmd.executeElementLibraryCommand(paramsGetParameters,result => {
        if (result.status === 200) {
          let res = result.data.data;
          this.fillData(res?.parameters);
        }
      })
    },

    fillData(parameters) {
      let org = parameters;
      let params = [];
      this.datum = org?.map(item => {
        item.variableParameters.forEach(cur => {
          let param = {
            "name":cur.name,
            "expression":cur.expression,
          }
          params.push(param);
        });

        return params;
      });
      this.params.listParameters = params;
    },
    //参数化模型进行插入
    insert() {
      //获取当前选取的模型的模板
      let curElementTemplate = elementLibraryManager.getItemById(this.modalParams.knowledgeId)
      //根据输入的参数进行参数化模型插入
      let params = {
        templateParam:this.params.listParameters,
        modalParam:this.modalParams,
        elementItem:curElementTemplate,
      }
      elementLibraryCmd.executeInsertLibPartCommand(params,result =>{
        //this.close();
      })
    },
    close(){
      modalController.deleteModal(this.modalType);
    },
    closeEvenHandler() {
      this.close();
    },
  }
};
</script>
<style scoped>
.wrap {
    font-size: 12px;
}
.query-description {
    height: 24px;
    font-size: 12px;
    line-height: 24px;
    display: flex;
    justify-content: space-between;
    margin-left: 10px;
    margin-top: 3px;
}
/*.label {*/
/*    max-width: 100px;*/
/*    overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*}*/
.result-list {
    padding: 2px 10px;
    max-height: 180px;
    overflow-y: auto;
}

.result-item {
    margin: 1px 0;
    padding: 2px 0 2px 4px;
    display: flex;
    align-items: center;
}

.result-item .angle-icon {
    font-weight: bold;
    padding: 0 2px;
}

.result-item-title {
    flex-grow: 1;
}

.ident {
    padding-left: 14px;
}

.selected-query-li {
    border-radius: 3px;
    background-color: var(--bg-color3);
}
.base-modal.modal-knowledge-parametric {

}

.close-button {
    @apply tw-cursor-pointer;
}

.close-button-container {
    @apply tw-flex tw-justify-end tw-mb-0.5 tw-py-1;
}

.ref-picture {
    position: absolute;
    padding: 1em;
    padding-top: 0.5em;
    width: 320px;
    height: 275px;
    top: 0;
    left: 505px;
}
</style>
